<template>
    <div class="problem">
        <div id="sign"></div>
        <div id="question">
            <span class="index">{{index}}.</span>
            <span id="title">【{{problem.difficulty}}】{{problem.problem}}</span>
        </div>
        <div id="options">
           <div class="option">
               <span class="index">A.</span>
               <span class="content">{{problem.optionA}}</span>
           </div>
           <div class="option">
               <span class="index">B.</span>
               <span class="content">{{problem.optionB}}</span>
           </div>
           <div class="option">
               <span class="index">C.</span>
               <span class="content">{{problem.optionC}}</span>
           </div>
           <div class="option">
               <span class="index">D.</span>
               <span class="content">{{problem.optionD}}</span>
           </div>
        </div>
        <div id="answer">
            <div class="answer-wapper">
                <span>答案:</span>
                <span v-if="!isShow" @click="showAnswer()">点击查看答案</span>
                <span v-else >{{problem.answer}}</span>
            </div>
            <div class="collect" v-show="showCollect == null || showCollect ? true : false">
                <van-icon @click="collectProm" :name="problem.collect ? collImg1 : collImg0" />
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);

export default {
    props:['index','problem','showCollect'],
    
    data(){
        return {
            isShow :false,
            collImg0: require('../assets/img/coll0.png'),
            collImg1: require('../assets/img/coll1.png')
        }
    },
    methods:{
        showAnswer(){
            this.isShow = true
        },
        closeAnswer(){
            this.isShow = false
        },
        collectProm(e){
            this.$emit('collectProm',this.index,this.problem.id)
        }
    }
}
</script>

<style lang="less" scoped>
    .index {
        display: block;
           width: 40px;
           height: 15px;
           line-height: 15px;
           text-align: center;
    }

   .problem {
       margin: 0px 12px;
       background-color: #f7f8fa;
       position: relative;
       display: block;
       position: relative;
       box-shadow: 5px 5px 0 0 #eee;
   }
   #sign {
       width: 0px;
       height: 0px;
       border: 10px solid ;
       border-color: #99FF99 transparent  transparent #99FF99 ;
   }
   #question {
       display: block;
       width: 95%;
       height: auto;
       text-align: left;
       font: inherit;
       word-break:break-all;
       margin-top: -10px;
       margin-left: 10px;
       #title {
           margin: -15px 0 0 40px;
           display: block;
           text-align: left;
           line-height: 20px;
       }
   }
   #options {
       display: block;
       width: 90%;
       height: auto;
       text-align: left;
       word-break:break-all;
       margin:auto 15px;
       padding:10px 0 0 10px;
       font-size: 14px;
       :not(:first-child) {
           margin-top: 10px;
       }
       .content {
           margin: -15px 0 0 40px;
           display: block;
           text-align: left;
           line-height: 15px;
       }
   }
   #answer {
       width: 100%;
       height: auto;
       padding: 10px;
       text-align: left;
       display: flex;
       justify-content:space-between;
       align-items: center;
       :not(:first-child) {
           color: red;
       }
       .collect{
           margin-right: 20px;
       }
   }
</style>